import React, { FC, MouseEvent } from "react";
import styles from "./index.module.scss";
import { Spin } from "antd";
import classNames from "classnames";
import useGetComponentInfo from "../../../../hooks/useGetComponentInfo";
import { getComponentConfByType } from "../../../../components/QuestionComponents";
import {
  ComponentInfoType,
  changeSelectedId,
  moveComponent,
} from "../../../../store/componentsReducer";
import useBindCanvasKeyPress from "../../../../hooks/useBindCanvasKeyPress";
import { useDispatch } from "react-redux";
import SortTableContainer from "../../../../components/DragSortable/SortTableContainer";
import SortableItem from "../../../../components/DragSortable/SortableItem";
import useGetPageInfo from "../../../../hooks/useGetPageInfo";

type PropsType = {
  loading: boolean;
};
//根据store中定义的类型在组件中寻找对应的配置
function getComponent(componentInfo: ComponentInfoType) {
  const { type, props } = componentInfo;
  const componentConf = getComponentConfByType(type);
  if (componentConf == null) return null;
  const { Component } = componentConf;
  return <Component {...props} />;
}

const EditCanvas: FC<PropsType> = ({ loading }) => {
  const { componentList, selectedId } = useGetComponentInfo();
  const { bgUrl } = useGetPageInfo();
  const dispatch = useDispatch();
  //获取选中组件的id
  function handleClick(event: MouseEvent, id: string) {
    event.stopPropagation();
    dispatch(changeSelectedId(id));
  }

  //绑定快捷键
  useBindCanvasKeyPress();

  if (loading) {
    return (
      <div style={{ textAlign: "center", marginTop: "60px" }}>
        <Spin />
      </div>
    );
  }
  //SortTableContainer 的item属性 需要每一个item都有id
  const componentListWithId = componentList.map((component) => {
    return { ...component, id: component.fe_id };
  });
  //拖拽排序结束
  function handleDragEnd(oldIndex: number, newIndex: number) {
    dispatch(moveComponent({ oldIndex, newIndex }));
  }
  return (
    <div
      className={styles.canvas}
      style={{
        backgroundImage: `url(${bgUrl})`,
      }}
    >
      <SortTableContainer items={componentListWithId} onDragEnd={handleDragEnd}>
        {componentList
          .filter((component) => !component.isHidden)
          .map((component) => {
            const { fe_id, isLocked } = component;
            //拼接class name
            const wrapperDefaultClassName = styles["component-wrapper"];
            const selectedClassName = styles.selected;
            const lockedClassName = styles.locked;
            const wrapperClassName = classNames({
              [wrapperDefaultClassName]: true,
              [selectedClassName]: fe_id === selectedId,
              [lockedClassName]: isLocked,
            });
            return (
              <SortableItem key={fe_id} id={fe_id}>
                <div
                  key={fe_id}
                  className={wrapperClassName}
                  onClick={(e) => handleClick(e, fe_id)}
                >
                  <div className={styles.component}>
                    {getComponent(component)}
                  </div>
                </div>
              </SortableItem>
            );
          })}
      </SortTableContainer>
    </div>
  );
};

export default EditCanvas;
